<template>
    <van-nav-bar
        title="修改资料"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />

    <div class="clear"></div>
    <div class="h50"></div>
    <div class="clear"></div>
    <div class="user" :style="{background:'url('+LoginUser.cover+')'}">
        <div class="user-image">
            <img :src="LoginUser.avatar" alt="">
        </div>
    </div>
    <div class="form">
        <van-form @submit="profile">
            <!-- <div class="item">
                <div class="title">
                    昵称：
                </div>
                <input type="text" name="nickname" placeholder="请输入昵称">
            </div> -->

            <!-- 昵称 -->
            <van-field
                v-model="LoginUser.nickname"
                name="nickname"
                label="昵称"
                label-width="4em"
                label-align="right"
                placeholder="请输入昵称"
                :rules="[{ required: true, message: '请填写昵称' }]"
            />

            <van-field
                v-model="LoginUser.email"
                name="email"
                label="邮箱"
                label-width="4em"
                label-align="right"
                readonly
                placeholder="请输入邮箱"
            />
            
            <van-field
                v-model="LoginUser.password"
                name="password"
                label="密码"
                label-width="4em"
                label-align="right"
                type="password"
                placeholder="请输入密码"
            />
            
            <van-field name="sex" label="性别" label-width="4em" label-align="right">
                <template #input>
                    <van-radio-group v-model="LoginUser.sex" direction="horizontal">
                        <van-radio name="0">保密</van-radio>
                        <van-radio name="1">男</van-radio>
                        <van-radio name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <van-field
                v-model="LoginUser.region_text"
                is-link
                readonly
                label-width="4em"
                label-align="right"
                name="region"
                label="地区选择"
                placeholder="点击选择省市区"
                @click="showArea = true"
            />
            <van-popup v-model:show="showArea" position="bottom">
            <van-area
                :value="region"
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showArea = false"
            />
            </van-popup>

            <van-field
                v-model="LoginUser.content"
                rows="2"
                autosize
                label="个人简介"
                type="textarea"
                maxlength="50"
                name="content"
                label-width="4em"
                label-align="right"
                placeholder="请输入个人简介"
                show-word-limit
            />

            
            <van-field
                name="avatar"
                label="修改头像"
                label-width="4em"
                label-align="right"
            >
                <template #input>
                    <van-uploader v-model="avatar" :max-count="1" />
                </template>
            </van-field>

            <van-field
                name="cover"
                label="修改背景"
                label-width="4em"
                label-align="right"
            >
                <template #input>
                    <van-uploader v-model="cover" :max-count="1" />
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    修改资料
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
import { areaList } from '@vant/area-data'
export default {
    data() {
        return {
            areaList,
            LoginUser:this.$cookies.get('LoginUser'),
            showArea:false,
            avatar:[
                { 
                    url: this.$cookies.get('LoginUser').avatar
                }
            ],
            cover:[
                { 
                    url: this.$cookies.get('LoginUser').cover
                }
            ]
        }
    },
    methods: {
        onClickLeft()
        {
            this.$router.go(-1)
        },
        async profile(form)
        {
            if(this.LoginUser.province)
            {
                form.code = this.LoginUser.province
            }

            if(this.LoginUser.city)
            {
                form.code = this.LoginUser.city
            }

            if(this.LoginUser.district)
            {
                form.code = this.LoginUser.district
            }

            if(this.avatar)
            {
                // console.log(this.avatar[0].file)
                form.avatar = this.avatar[0].file
            }

            if(this.cover)
            {
                // console.log(this.cover[0].file)
                form.cover = this.cover[0].file
            }

            if(this.LoginUser.id)
            {
                form.id = this.LoginUser.id
            }

            var result = await this.$api.profile(form)

            if(form.password)
            {
                if(result.code === 1)
                {
                    this.$notify({
                        type: "success",
                        message: '修改成功，请重新登录',
                        duration:1500,
                        onClose:() => {
                            // this.$cookies.set("LoginUser",result.data)
                            this.$cookies.remove('LoginUser')
                            this.$router.push('/user/base/login')
                        }
                    });
                    return false
                }else{
                    this.$notify({
                        type: "danger",
                        message: result.msg,
                        duration:1500
                    });
                    return false
                }
            }else{
                if(result.code === 1)
                {
                    this.$notify({
                        type: "success",
                        message: result.msg,
                        duration:1500,
                        onClose:() => {
                            this.$cookies.set("LoginUser",result.data)
                            this.$router.push(result.url)
                        }
                    });
                    return false
                }else{
                    this.$notify({
                        type: "danger",
                        message: result.msg,
                        duration:1500
                    });
                    return false
                }
            }


        },
        onConfirm(value)
        {
            // 获取选择地区的数据
            let [province,city,district] = value

            var region_text = ''

            if(province)
            {
                region_text += province.name + '-'
                this.LoginUser.province = province.code
            }

            if(city)
            {
                region_text += city.name + '-'
                this.LoginUser.city = city.code
            }

            if(district)
            {
                region_text += district.name
                this.LoginUser.district = district.code
            }

            this.LoginUser.region_text = region_text


            // 关闭
            this.showArea = false

        }
    },
    computed:{
        region()
        {
            let province = this.LoginUser.province
            let city = this.LoginUser.city
            let district = this.LoginUser.district

            let region = ''

            if(province)
            {
                region = province
            }

            if(city)
            {
                region = city
            }
            
            if(district)
            {
                region = district
            }

            // 期望参数的类型是字符串 region => int
            return region.toString()
        }
    }
}
</script>
<style>
@import url('/assets/css/profile.css');

/* .h50{
    height: 5px;
} */
</style>